<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台信息</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/admin.css" type="text/css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>

</head>
<body>
<!-- 引入header -->
<div id="header"></div>
<div class="container">

    <div class="panel panel-default">
        <div class="panel-heading"> <i class="glyphicon glyphicon-flag"></i> <span id="username">实验报告</span></div>
        <div class="panel-body">
            已提交的实验报告如下：
        </div>
        <table class="table table-bordered table-striped table-hover text-center">
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">学号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">实验过程</th>
                <th class="text-center">实验结果</th>
                <th class="text-center">实验心得</th>
                <th class="text-center">提交时间</th>
            </tr>
            <tbody id="reports">
                <tr hidden>
                    <td>1</td>
                    <td>S1907023</td>
                    <td>张三</td>
                    <td>实验过程就是写这些无用的代码</td>
                    <td>实验结果就是写这些无用的代码</td>
                    <td>实验过程就是写这些无用的代码</td>
                </tr>
            </tbody>
        </table>
        <div class="panel-footer text-right">

        </div>

    </div>
    <nav aria-label="Page navigation" class="text-center">
        <ul class="pagination" id="pageNum">
            <li><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="javascript:;" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
        </ul>
    </nav>
</div>

<div class="clear"></div>
<!-- 引入footer -->
<div id="footer"></div>

<script>
    $(function () {
        loadreports(null)
    });

    function loadreports(currentPage) {
        $.get("user/findReports",{currentPage:currentPage},function (pb) {

            //设置底部分页数据
            if (pb == null){
                $("#pageNum").hide()
                $("#reports").hide()
            }
            var lis = '';

            //判断上一页
            var preNum = pb.currentPage - 1;
            if(preNum<=0){
                preNum = 1;
            }
            var prePage = '<li onclick="javascript:loadreports('+preNum+');"><a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>';
            lis += prePage;

            var begin;
            var end;

            //要在底部显示10个页码
            if(pb.totalPage < 10){//总页码不够10页
                begin = 1;
                end = pb.totalPage;
            }else{//总页码超过10页
                begin = pb.currentPage - 5;
                end = pb.currentPage + 4;

                //如果前面不足5个
                if(begin < 1){
                    begin = 1;
                    end = begin + 9;
                }

                //如果后面不足4个
                if(end > pb.totalPage){
                    end = pb.totalPage;
                    begin = end - 9;
                }
            }

            for (var i = begin; i <= end; i++) {
                var li = '';
                if(i == pb.currentPage){
                    li = '<li class="active" onclick="javascript:loadreports('+i+');"><a href="javascript:void(0);">'+i+'</a></li>'
                }else{
                    li = '<li onclick="javascript:loadreports('+i+');"><a href="javascript:void(0);">'+i+'</a></li>'
                }
                lis += li;
            }

            let nextNum = pb.currentPage + 1;
            if(nextNum > pb.totalPage){
                nextNum = pb.totalPage;
            }

            var nextPage = '<li onclick="javascript:loadreports('+nextNum+');"><a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>';
            lis += nextPage;

            $("#pageNum").html(lis);

            //展示列表数据

            for (let i = 0; i < pb.list.length; i++) {
                let report = pb.list[i];
                let li = '<tr>' +
                    '                        <td>'+report.rid+'</td>' +
                    '                        <td>'+report.user.stu_no+'</td>' +
                    '                        <td>'+report.user.name+'</td>' +
                    '                        <td>'+report.process+'</td>' +
                    '                        <td>'+report.result+'</td>' +
                    '                        <td>'+report.feel+'</td>' +
                    '                        <td>'+report.create_time+'</td>' +
                    '                    </tr>';
                $("#reports").append(li);
            }

            window.scrollTo(0,0)
        })
    }
</script>

<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>

</html>